<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<div id="host">
    <div>
        <span></span>
        <span></span>
    </div>
    <div id="slotted">
        <span></span>
        <span></span>
    </div>
    <div>
        <span></span>
        <span></span>
    </div>
</div>
<script>
description("Style invalidation of slotted elements.");

var root = host.attachShadow({"mode":"open"});
root.innerHTML = '<style>.outer ::slotted(#slotted) { background-color: red } .outer .inner::slotted(#slotted) { background-color: green }</style><div id="outer"><slot id="inner"></slot></div>';

shouldBeEqualToString("getComputedStyle(slotted).backgroundColor", "rgba(0, 0, 0, 0)");

host.offsetTop; // force recalc

root.querySelector("#outer").className = "outer";
if (window.internals)
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
shouldBeEqualToString("getComputedStyle(slotted).backgroundColor", "rgb(255, 0, 0)");

host.offsetTop; // force recalc

root.querySelector("#inner").className = "inner";
if (window.internals)
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
shouldBeEqualToString("getComputedStyle(slotted).backgroundColor", "rgb(0, 128, 0)");
</script>
